<template>
	<view class="content">
		<view class="content_top">
			<image class="userimg" mode="aspectFit" :src="info.headerimg"></image>
			<view class="right">
				<view class="name overflow1">
					<text>{{info.username}}</text>
					{{info.company}}
				</view>
				<view class="text">
					<text>{{info.ResidentCity}}</text>
					<text>{{info.SpecializedSkill}}</text>
				</view>
			</view>
		</view>
		<view class="content_box">
			<view class="text">{{info.content}}</view>
			<view class="img">
				<image v-for="(v,k) in info.contentimgs" :key="k" mode="widthFix" :src="v"></image>
			</view>
		</view>
		<view class="content_link">
			<view class="sum">浏览{{info.viewcount}}次</view>
			<view class="zan" @click="setZan">
				<uv-icon name="thumb-up" :color="info.woyidianzan==1?'#e94f06':'#999'" size="22"></uv-icon>
				<text :style="{color:info.woyidianzan==1?'#e94f06':'#999'}">{{info.dianzancount}}</text>
			</view>
		</view>
		<view class="content_zan" v-if="info.aixin.length!='0'">
			<uv-icon name="heart-fill" color="#f63155" size="22"></uv-icon>
			<text>赞</text>
		</view>
		<view class="content_zanimg">
			<image v-for="(v,k) in info.aixin" :key="k" mode="aspectFit" :src="v.headerimg"></image>
		</view>
		<view class="content_plsum">{{info.RowCount}}条评论</view>
		<view class="content_pl">
			<view class="list" v-for="(v,k) in newList" :key="k">
				<image mode="aspectFit" class="userimg" :src="v.headerimg"></image>
				<view class="right">
					<view class="name">{{v.username}}</view>
					<view class="text">{{v.content}}</view>
					<view class="time">{{v.datetime}}</view>
				</view>
			</view>
		</view>
		<view class="content_bottom">
			<view class="input">
				<input type="text" v-model="content" @confirm="pinglun" placeholder="请输入你的看法"/>
				<view class="button" @click="pinglun">发送</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		homeApi
	} from "@/api/index"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		link
	} from '@/utils/utils.js'
	onLoad((open)=>{
		id.value = open.id
		getData()
	})
	const id = ref('')
	const newList = ref([])
	const isonload = ref(true)
	const pageSize = ref(20)
	const page = ref(1)
	const hasMore = ref(true)
	const isLoad = ref(false)
	const info = ref({})
	const loData = ()=>{
		newList.value = []
		isonload.value = true
		page.value = 1
		hasMore.value = true
		isLoad.value = false
		getData()
	}
	const getData = async () => {
		if (isLoad.value) return false
		if (!hasMore.value) return false
		isLoad.value = true
		let data = {
			do: 'txlcommdetail',
			commid: id.value,
			PageNo: page.value,
			PageSize: pageSize.value,
		}
		let res = await homeApi.publicGet(data)
		let list = []
		let infoData = {}
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txlcommdetail') {
				infoData = res.columns[i]
				list = res.columns[i].pinglun ? res.columns[i].pinglun : []
			}
		}
		if (isonload.value) {
			info.value = infoData
			isonload.value = false
		}
		let hasmore = list.length === pageSize.value
		list = newList.value.concat(list)
		hasMore.value = hasmore
		isLoad.value = false
		page.value = page.value + 1
		newList.value = list
	}
	const content = ref('')
	const pinglun = async()=>{
		let data = {
			commid:id.value,
			content:content.value
		}
		let res = await homeApi.publicPost(data,'txlfabupinglun')
		for (let i = 0; i < res.columns.length; i++) {
			if(res.columns[i].statuscode=='200'){
				uni.showToast({
					title: res.columns[0].message,
					icon:'none',
					duration: 2000
				});
				content.value=''
				loData()
			}else{
				uni.showToast({
					title: res.columns[0].message,
					icon:'none',
					duration: 2000
				});
			}
		}
		
	}
	const setZan = async()=>{
		let dianzan = 1
		if(info.value.woyidianzan=='1'){
			dianzan=-1
		}
		let data = {
			commid:id.value,
			dianzan:dianzan
		}
		let res = await homeApi.publicPost(data,'txlcommdianzan')
		for (let i = 0; i < res.columns.length; i++) {
			if(res.columns[i].statuscode=='200'){
				loData()
				// info.value.woyidianzan = dianzan
				// if(dianzan==1){
				// 	info.value.dianzancount++
				// }else{
				// 	info.value.dianzancount--
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		&_top{
			width: calc(100% - 60rpx);
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.userimg{
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
			}
			.right{
				width: calc(100% - 140rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.name{
					color: #666;
					font-size: 28rpx;
					text{
						font-size: 32rpx;
						font-weight: bold;
						margin-right: 10rpx;
						color: #333;
					}
				}
				.text{
					color: #666;
					font-size: 28rpx;
					margin-top: 10rpx;
					text{
						margin-right: 20rpx;
					}
				}
			}
		}
		&_box{
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			.text{
				font-size: 30rpx;
			}
			.img{
				margin-top: 20rpx;
				width: 100%;
				image{
					width: 100%;
				}
			}
		}
		&_link{
			width: calc(100% - 60rpx);
			padding:20rpx 30rpx;
			display: flex;
			align-items:center;
			justify-content: space-between;
			.sum{
				color: #5a6282;
				font-size: 28rpx;
			}
			.zan{
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					margin-left: 10rpx;
					font-size: 28rpx;
					color: #555;
				}
			}
		}
		&_zan{
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #555;
			text{
				margin-left: 10rpx;
			}
		}
		&_plsum{
			width: calc(100% - 60rpx);
			padding:20rpx 30rpx;
			background: #f5f6fa;
			font-size: 28rpx;
			color: #555;
		}
		&_zanimg{
			width: calc(100% - 60rpx);
			padding:0rpx 30rpx;
			padding-bottom: 30rpx;
			image{
				width: 60rpx;
				height: 60rpx;
				border-radius: 8px;
				margin-top: 20rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}
		&_pl{
			width: 100%;
			.list{
				width: calc(100% - 60rpx);
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f6fa;
				.userimg{
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
				}
				.right{
					width: calc(100% - 120rpx);
					.name{
						font-size: 32rpx;
						font-weight: bold;
					}
					.text{
						font-size: 28rpx;
						margin-top: 10rpx;
						color: #555;
					}
					.time{
						font-size: 28rpx;
						margin-top: 10rpx;
						color: #555;
					}
				}
			}
			.list:nth-last-child(1){
				border-bottom: none;
			}
		}
		&_bottom{
			width: 100%;
			height: 140rpx;
			.input{
				width: calc(100% - 60rpx);
				padding-left: 30rpx;
				padding-right: 30rpx;
				height: 140rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				z-index: 999;
				box-shadow: 0 0 5rpx 0 rgba(0,0,0, .2);
				input{
					width: calc(100% - 130rpx);
					height: 40rpx;
					background: #f5f6fa;
					border-radius: 30px;
					padding: 20rpx;
					font-size: 28rpx;
				}
				.button{
					font-size: 32rpx;
				}
			}
		}
	}
</style>